<template>
  <div>
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!---------收货地址的那一栏！！！！！--------->
    <van-cell class="show-address" v-if="defaultAddress" icon="location" @select="select" v-on:click="addAddress">
      <template slot="title">
        <span v-if="defaultAddress.default_address === true" class="payment-identity">默认</span>
        <span class="custom-text">
           {{defaultAddress.area.city.province.name}}{{defaultAddress.area.city.name}}
        </span>
      </template>
      <!-------收货人------->
      <template slot="label">
        <div class="custom-text1">
          <span>{{defaultAddress.detail_address}}</span>
          <span class="icon-left"><van-icon name="arrow" /></span>
        </div>
        <span class="custom-text">
          收货人:{{defaultAddress.receiver_name}}
        </span>
        <span class="custom-text">
          {{defaultAddress.receiver_phone}}
        </span>
      </template>

    </van-cell>
    <!---------新增收货地址的那一栏！！！！！--------->
    <van-cell v-else value="新增收货地址" class="show-address" icon="add-o" is-link v-on:click="addAddress">
      <template slot="title">
        <span class="custom-text address">点击添加收货地址</span>
      </template>
    </van-cell>
    <!---------画线！--------->
    <div class="line" >
      <svg class="drawline"  version="1.1"
           xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="0" x2="100%" y2="0" style="stroke :rgb(255,0,0);stroke-width:5"stroke-dasharray="20,40" />
        <line x1="30" y1="0" x2="100%" y2="0" style="stroke :deepskyblue;stroke-width:5"stroke-dasharray="20,40" />
      </svg>
    </div>
    <!---------显示商品！--------->
    <div class="order-goods">
      <div class="van-card" v-for="item in goods" :key="item.id" >
        <div class="van-card__header">
          <a class="van-card__thumb" :thumb="baseUrl+item.product.thumb">
            <img   :src="baseUrl+item.product.thumb" class="van-card__img">
          </a>
          <div class="van-card__content">
            <div class="van-card__title" :title="item.product.title"></div>
            <div class="van-card__desc van-ellipsis" >{{item.product.desc}}</div>
            <div class="van-card__bottom">
              <div class="van-card__price" >¥{{item.product.price}} </div>
              <div class="van-card__num" >x {{ item.quantity}}</div>
            </div>
          </div>
        </div>
        <div class="van-card__footer">
          <div>
            <div class="van-cell van-field change-padding">
              <div class="van-cell__title van-field__label">
                <span class="order-desc">*订单备注</span>
              </div>
              <div class="van-cell__value">
                <div class="van-field__body">
                  <input type="text" placeholder="请输入备注" class="van-field__control">
                  <div class="van-field__right-icon">0/50</div>
                </div>
              </div>
            </div>
        生成日期2019-05-15 10:40:56
          </div>
        </div>

      </div>
<!--      <van-card-->
<!--        v-for="item in goods"-->
<!--        :key="item.id"-->
<!--        :title="item.product.title"-->
<!--        :desc="item.product.desc"-->
<!--        :num="item.quantity"-->
<!--        :price="item.product.price"-->
<!--        :thumb="baseUrl+item.product.thumb"-->
<!--      >-->
<!--        <van-field v-model="remark" placeholder="请输入备注" label="订单备注">-->
<!--          <template slot="icon">-->
<!--            {{remarkLen}}/50-->
<!--          </template>-->
<!--        </van-field>-->
<!--        <div slot="footer">-->
<!--          <van-field v-model="remark" placeholder="请输入备注" label="订单备注">-->
<!--            <template slot="icon">-->
<!--              {{remarkLen}}/50-->
<!--            </template>-->
<!--          </van-field>-->
<!--          生成日期{{order.created | date('%F %T')}}-->
<!--        </div>-->
<!--      </van-card>-->

      <van-cell-group>

        <van-cell title="支付金额">
          <span class="red">{{order.total_price | yuan}}</span>
        </van-cell>
      </van-cell-group>
    </div>
    <van-submit-bar
      :price="totalPrice"
      label="总计："
      buttonText="提交订单"
      :loading="isSubmit"
      :disabled="isDisabled"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { CellGroup, Cell, Card, SubmitBar, Tag, Field, Toast, NavBar } from 'vant'
import base from '@/api/base'
export default {
  components: {
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Card.name]: Card,
    [SubmitBar.name]: SubmitBar,
    [Tag.name]: Tag,
    [Field.name]: Field,
    [NavBar.name]: NavBar
  },
  async created () {
    const id = this.$route.params.id || null
    console.log(id)
    if (id !== null) {
      const order = await this.getOrder(id)
      if (order === null || order.state !== 0) {
        Toast('找不到该资源')
        this.$router.replace({ name: 'home' })
      }
    } else {
      Toast('找不到该资源')
      this.$router.replace({ name: 'home' })
    }
    // 增加一个对默认地址的判断 如果为真 展现出默认两个字
    // if (this.$store.state.address.selectlist === false) {
    //   this.choose = false
    // } else {
    //   this.choose = true
    // }
    // console.log('paymentstore:' + this.$store.state.address.selectlist)
    // console.log('choose:'+this.choose)
    await this.getAddresses()
  },
  data () {
    return {
      // choose: true,
      order: { order_details: [] },
      addresses: null,
      isSubmit: false,
      isDisabled: false,
      remark: '',
      baseUrl: base.gene_base,
      addressList: null,
      selectlist: true
    }
  },
  computed: {
    goods () {
      return this.order.order_details
    },
    totalPrice () {
      return parseFloat(this.order.total_price) * 100
    },
    remarkLen () {
      return this.remark.length
    },
    defaultAddress () {
      // 没有默认地址的时候，显示第一个地址！！
      if (this.$store.state.address.selectedAddress !== -1) {
        console.log('这是第一个循环')
        console.log('第一个defaultAddress是:' + this.addresses)
        // console.log(this.addresses.filter(item => item.default_address === true))
        return this.addresses ? this.addresses.filter(item => item.id === this.$store.state.address.selectedAddress).shift() : null
      }
      let defaultAddress = this.addresses ? this.addresses.filter(item => item.default_address === true).shift() : null
      // 有默认地址的时候，显示默认地址！！
      console.log('defaultAddress是:'+defaultAddress)
      if (defaultAddress === undefined || defaultAddress === null) {
        // console.log('this.addresses:')
        // console.log(defaultAddress)
        // 已经存入的地址
        console.log('这是第二个循环')
        return (this.addresses && this.addresses.length > 0) ? this.addresses[0] : null
      }
      return defaultAddress
    }
  },
  mounted () {
    // const id = this.$route.params.id
    // await this.select()
    const id = this.$route.params.isDefault
    console.log(this.$route.params)
  },
  methods: {
    select (item, index) {
      console.log(index)
      console.log(item)
      if (item.isDefault) {
        console.log('default:' + typeof item.isDefault)
        console.log('default:' + item.isDefault)
        this.selectlist = item.isDefault
        this.chosenAddressId = item.id
        this.choose = true
      }
    },
    async getOrder (id) {
      const { data } = await this.$api.order.orderDetail(id)
      if (data.code !== 200) {
        Toast(data.desc)
        return null
      } else {
        this.order = data.data
        return this.order
      }
    },
    addAddress () {

      this.$router.push({ name: 'addresses' })
    },
    async getAddresses () {
      const { data } = await this.$api.account.addressList()
      if (data.code !== 200) {
        Toast(data.desc)
      } else {
        this.addresses = data.data
        // data.data.forEach((res) => {
        //   console.log(res)
        // })
      }
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    onSubmit () {
      // if (this.defaultAddress === null || this.order.address === null ) {
      if (this.defaultAddress === null || this.defaultAddress === undefined) {
        // 之后发现了为undefined未选中状态时也会跳转 并且this.order.address一直为null
        Toast('邮寄地址不能为空')
        console.log('if'+this.defaultAddress)
        console.log('if'+this.order.address)
      }
      else {
        // console.log('address提交' + this.defaultAddress.detail_address)
        // if (this.defaultAddress.detail_address === undefined) {
        //   Toast('邮寄地址不能为空')
        // }
        // else {
        console.log('245'+this.defaultAddress)
        console.log('246'+this.order.address)
        this.$router.push({ name: 'payment-confirm', params: { id: this.order.id } })
        // }
      }
    }
  }
}
</script>

<style lang="less">
  .line{
    display: flex;
  }
  .drawline{
    width: 100%;
    height: 5px;
    /*position: absolute;*/
  }
  /*添加收货地址那里的字体样式*/
  .address{
    font-weight: 540;
    font-size: 15px;
  }
  /*整个地址栏*/
  .show-address{
    /*border-bottom: 5px dashed red;*/
    box-shadow: 0 3px 20px rgb(226, 230, 229);
    background-color: white;
    width: 100%;
    height: 100px;
    /*margin: 10px;*/
    /*border-radius: 10px;*/
    /*默认两个字*/
    .payment-identity{
      color:white;
      background-color: red;
      padding: 1px 5px;
      border-radius: 10px;
    }
  }

  /*收货人*/
  .custom-text{
    color: black;

  }
  .custom-text1{
    .custom-text();
    font-weight: 800;
    padding-bottom: 8px;
    margin-top: 5px;
    font-size: 15px;
    .icon-left{
      float: right;
    }
  }
  .van-cell__value {
    font-size: 14px;
  }
  /*我觉得图片header那里的样式太长 修改重写一下高度*/
  .van-card__header {
    height: 60px;
    /*图片*/
    .van-card__thumb {
      height: auto;
    }
    /*图片右边的内容*/
    .van-card__content {
      height: auto;
    }
  }
  /*重写vanfield的样式 让他出现在footer里面*/
  .van-cell {
    text-align: left;
    /*background-color: #fafafa;*/
    /*订单备注四个字*/
    .van-field__label {
      max-width: 105px;
      .order-desc{
        color: red;
        float: left;
      }
    }

    /*订单备注的内容*/
    .van-field__control {
      background-color: #ffffff;
    }
  }
  .change-padding{
    padding: 10px 0 10px 0;
  }
  /*.van-cell__title, .van-cell__value {*/
  /*  color:red;*/
  /*}*/
  /*卡片样式增加*/
  .van-card {
    box-shadow: 0 3px 20px rgb(226, 230, 229);
    margin: 10px;
    border-radius: 10px;
    background-color: white;
  }
</style>
